<template>
<div class="mystar">
<!--  style="background-color: rgba(255,255,255,1)"-->
  <div class="myhead" >
    <input type="button" value="返回" class="mybtn mymargin" v-on:click="back"><br><br>
    <div class="mytitle">{{book.name}}  &nbsp;&nbsp;&nbsp;词汇量：{{book.count}}</div>
  </div>

  <div class="mybody">
    <tr v-for="(item,index) in words" class="mytext">
      <td>

        <div class="myspace">
          {{item.code}}&nbsp;{{item.word}} &nbsp;&nbsp;&nbsp;&nbsp;
          {{item.Interpretation}}
        </div>
      </td>
      <td></td>
    </tr>
  </div>

</div>
</template>

<script>
    export default {
      name: "Word",
      data(){
        return{
          book:{},
          words:[]
        }
      },
      methods:{
        loadMore() {
          this.loading = true;
          setTimeout(() => {
            let last = this.list[this.list.length - 1];
            for (let i = 1; i <= 10; i++) {
              this.list.push(last + i);
            }
            this.loading = false;
          }, 2500);
        },
        back(){
          this.$router.go(-1)
        },
        wordspath(){
          this.book = this.$route.params
          this.words=require('../assets/' + this.book.path)
        }
      },
      created() {
        this.wordspath()
      }
    }
</script>

<style scoped>
  /*.mystar{*/
  /*  background-color: #959595;*/
  /*}*/
  li{
    list-style-type:none;
    float: left;
    margin-left: 5px;
  }
  ul{
    /*list-style-type:none;*/
    float: left;
    margin-left: 5px;
  }
  .myhead{
    border:1px solid #a9e7f9;position:fixed;top:0px;float:inherit;width:100%;
    background-color: #f3fdff;
  }
  .mybody{
    border:1px solid #c0fcff;
    background-color: #f3fdff;
    position:relative;
    /*图层*/
    z-index: -1;
    top:75px;float:inherit;width:100%;
    overflow: auto;

  }
  .mytitle{
    margin-top: 20px;
  }
  .mytext{
    text-align: left;
  }
  .mybtn{
    width:20%;height:40px;border:2px #f7f4f2 ;float:left;
    background-color: #bedcff;
    border-radius: 9px;
  }
  .myspace{
    margin-left: 5px;
  }
</style>
